<!-- 商品详情页 -->
<template>
  <div class="product-detail-main">
    <div class="detail-headerbar">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </div>
    <div class="center">
      <el-card class="card" shadow="hover">
        <el-form :model="product" ref="product" label-width="80px">
          <!-- 表单一 -->
          <div v-show="active == 0" class="step-1">
            <div class="header">
              <el-row :gutter="30">
                <el-col :span="8">
                  <el-form-item label="商品名称">
                    <el-input size="small" v-model="product.gname"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="生产地区">
                    <el-cascader
                      size="small"
                      :options="cityOptions"
                      v-model="selectCity"
                      @change="cityChange"
                    ></el-cascader>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="品牌">
                    <el-select size="small" v-model="product.brand_id" placeholder>
                      <el-option
                        v-for="i in brandList"
                        :key="i.index"
                        :label="i.cname"
                        :value="i.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商品描述">
                    <el-input size="small" v-model="product.descr"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商品编号">
                    <el-input size="small" v-model="product.pcode"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商品单位">
                    <el-input size="small" v-model="product.unit_name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="content">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="封面图片">
                    <el-upload
                      class="avatar-uploader"
                      action="/api/leju/admin/material/uploadImg"
                      :show-file-list="false"
                      :on-success="coverSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <img
                        v-else-if="product.cover_img"
                        :src="product.cover_img"
                        class="avatar"
                        alt
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :offset="1">
                  <div class="switch">
                    <el-form-item label="是否最新">
                      <el-switch v-model="product.isnew" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>

                    <el-form-item label="是否最热">
                      <el-switch v-model="product.ishot" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>

                    <el-form-item label="是否展示">
                      <el-switch v-model="product.isshow" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="商品分类">
                    <el-checkbox-group v-model="product.kindIds">
                      <el-checkbox v-for="i in kindList" :key="i.id" :label="i.id">{{i.ctitle}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="进价">
                    <el-input-number v-model="product.price_in" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标价">
                    <el-input-number v-model="product.price_out" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="详情价">
                    <el-input-number v-model="product.price_now" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="重量">
                    <el-input-number v-model="product.weight" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="排序">
                    <el-input-number v-model="product.sort" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备注">
                    <el-input v-model="product.bak"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="服务">
                    <el-radio v-model="product.service_promise" :label="0">无</el-radio>
                    <el-radio v-model="product.service_promise" :label="1">送货入户</el-radio>
                    <el-radio v-model="product.service_promise" :label="2">上门安装</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 表单二 -->
          <div v-show="active == 1" class="step-2">
            <el-row>
              <el-col :span="8">
                <el-form-item label="详情标题">
                  <el-input size="small" v-model="product.detail_title"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="4">
                <el-form-item label="详情描述">
                  <el-input size="small" v-model="product.detail_desc"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="20">
                <el-form-item label="添加sku">
                  <el-col :span="6">
                    <el-input placeholder="颜色描述" size="small" v-model="tempColor.color_text"></el-input>
                  </el-col>
                  <el-col :span="6" :offset="1">
                    <el-input placeholder="色号" size="small" v-model="tempColor.color"></el-input>
                  </el-col>
                  <el-col :span="6" :offset="1">
                    <el-button type="primary" size="small" @click="goAddColor">点击创建</el-button>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 生成sku!!!!!!!!!!!!!!!! -->
            <el-row>
              <el-form-item>
                <span>
                  颜色：
                  <div class="color-list">
                    <el-checkbox-group v-model="attrSelectList">
                      <el-checkbox
                        :style="{color:colorAttr.color}"
                        class="color-cel"
                        v-for="colorAttr in tempSkuAttrs"
                        :key="colorAttr.skuId"
                        :label="colorAttr.skuId"
                      >{{colorAttr.color_text}}</el-checkbox>
                    </el-checkbox-group>
                    <el-button type="primary" size="small" @click="createSkuList">生成Sku列表</el-button>
                  </div>
                </span>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table :data="skuList">
                  <el-table-column label="颜色" prop="color_text" />
                  <el-table-column label="色号" prop="color" />
                  <el-table-column label="sku编号">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.sku_code" placeholder></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.price" placeholder></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="库存">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.count" placeholder></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="颜色" prop="color_text" />
                  <el-table-column label="颜色" prop="color_text" />
                </el-table>
              </el-col>
              <!-- 上传轮播 -->
              <el-col :span="12" label="上传轮播图">
                <div style="margin:30px auto">
                  <el-upload
                    class="upload-demo"
                    action="/api/leju/admin/material/uploadImg"
                    :on-success="getBannerImgs"
                    :file-list="fileList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 100px; height: 100px"
                    v-for="i in product.imgs"
                    :key="i.index"
                    :src="'https://bufan-cloud.oss-cn-beijing.aliyuncs.com/leju_test/'+i"
                    @dblclick="deleImg(i)"
                  ></el-image>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <Tinymce
                  v-model="product.content"
                  ref="tin"
                  upload-url="http://bufantec.com/api/leju/admin/material/uploadImg"
                />
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
          </div>
          <!-- 表单三 -->
          <div v-show="active == 2" class="step-3">
            <el-row :gutter="30">
              <el-col :span="24">
                <el-form-item label="关联商品">
                  <el-transfer
                    v-model="linkProducts"
                    :titles="['所有商品','选中商品']"
                    :data="productList"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-card>
    </div>
    <div class="btn">
      <el-button type style="margin-top: 12px;" v-show="active>0" @click="goPre">上一步</el-button>
      <el-button type="primary" style="margin-top: 12px;" v-show="active<2" @click="goNext">下一步</el-button>
      <el-button type="primary" style="margin-top: 12px;" v-show="active>=2" @click="goupdate">提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  regionDataPlus,
  TextToCode,
  CodeToText,
} from "element-china-area-data";
import Tinymce from "@/components/Tinymce/index";
import kindApi from "@/api/product/kind";
import productApi from "@/api/product/index";
import product from "@/api/product/index";
export default {
  name: "detail",
  components: {
    Tinymce,
  },
  data() {
    // 正常数据
    return {
      active: 0,
      product: {
        kindIds: [],
        content: "",
        imgs: [],
        service_promise: [],
      },
      cityOptions: regionDataPlus,
      brandList: [],
      fileList: [],
      selectCity: [],
      kindList: [],
      skuList: [],
      imageUrl: "",
      tempColor: {}, //临时颜色对象
      tempSkuAttrs: [], //临时颜色啥？
      attrSelectList: [],
      linkProducts: [],//穿梭狂
      productList:[],
      id: "",
    };
  },
  computed: {},
  created() {
    this.id = this.$route.params.id;
    this.getBrandList();
    this.getKindList();
    this.getProductList();
    if (this.id) {
      this.getDetail();
    }
  },
  mounted() {},
  methods: {
    //获取全部商品列表
    getProductList() {
      productApi.productList().then(res => {
        var list = res.data.list
        list.forEach(item => {
          this.productList.push({
            key: item.id,
            label: item.gname
          })
        })
      })
    },
    // 城市选择
    cityChange() {
      this.product.origin_code = this.selectCity.toString();
      console.log(this.product.origin_code);
      console.log(this.selectCity);
    },
    // 上传头像用到的函数
    coverSuccess(response, file) {
      this.product.cover_img = response.ossUrl;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess(res, file) {},
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 上传轮播图
    getBannerImgs(response, file, fileList) {
      //  var fileName = response.fileName;
      this.product.imgs.push(response.fileName);
      console.log(this.product.imgs, 1234567);
    },
    // 删除轮播图用到的函数
    deleImg(e) {
      console.log(e);
      this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.product.imgs = this.product.imgs.filter((ele) => ele !== e);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      // this.product.imgs=this.product.imgs.filter((ele) => {ele !== e});
      console.log(this.product.imgs);
    },
    goPre() {
      if (this.active == 0) return;
      this.active--;
    },
    goNext() {
      if (this.active++ > 2) this.active = 0;
    },
    getKindList() {
      kindApi.list().then((res) => {
        this.kindList = res.data;
      });
    },
    goAddColor() {
      this.tempSkuAttrs.push({
        skuId: new Date().getTime(),
        color: this.tempColor.color,
        color_text: this.tempColor.color_text,
      });
      this.tempColor = {};
    },
    // 提交表单
    goupdate() {
      this.product.origin_province = CodeToText[this.selectCity[0]];
      this.product.origin_city = CodeToText[this.selectCity[1]];
      this.product.origin_area = CodeToText[this.selectCity[2]];
      this.product.link1 = this.linkProducts.join(","); //获取link
      for (var i = 0; i < this.skuList.length; i++) {
        this.product["skuList[" + i + "]"] = {
          sku_code: this.skuList[i].sku_code,
          color_text: this.skuList[i].color_text,
          color: this.skuList[i].color,
          price: this.skuList[i].price,
          count: this.skuList[i].count,
        };
        console.log(this.product);
      }
      productApi.upDate(this.product).then((res) => {
        if (res.code == "success") {
          this.$message.success("上传成功!");
          this.$router.push({ name: "productList" });
        } else {
          this.$message.error("上传失败!");
        }
      });
    },
    // 设置富文本
    getTin() {
      // var rs = this.$refs.tin.getContent()
      // return rs
    },
    setTin(v) {
      this.$refs.tin.setContent(v);
    },
    // 生成品牌列表
    getBrandList() {
      productApi.getBrandList({ limit: 99 }).then((res) => {
        this.brandList = res.data.list;
      });
    },
    // 生成商品详情数据
    getDetail() {
      productApi.getDetail({ id: this.id }).then((res) => {
        console.log(res);
        // 列表获取
        this.product = res.data;
        console.log(this.product.service_promise,111111111)
        // sku获取
        this.skuList = this.product.skuList;
        this.product.imgs = this.product.imgs.split(",");
        console.log(this.product.imgs);

        this.tempSkuAttrs = this.skuList;
        this.attrSelectList = this.skuList.map((ele) => ele.skuId);
        console.log(this.attrSelectList);
        // 地区获取
        this.selectCity = this.product.origin_code.split(",");

        // 分类获取
        this.product.kindIds = this.product.kindIds.split(",");       
        // 获取link列表
        if (product.link1) {
          if (product.link1.indexOf(",") != 1) {
            this.linkProducts = product.link1.split(",");
          }
        }
      });
    },
    // 生成sku列表
    createSkuList() {
      console.log(123456789);
      this.skuList = this.tempSkuAttrs.filter((ele) =>
        this.attrSelectList.includes(ele.skuId)
      );
    },
  },
};
</script>

<style lang='scss' scoped >
.product-detail-main {
  .detail-headerbar {
    width: 900px;
    margin: 30px auto;
  }
  .center {
  }
  .card {
    width: 80%;
    margin: 30px auto;
  }
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .switch {
    width: 200px;
    height: 190px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: space-between;
  }
  .btn {
    margin: 20px auto;
    width: 900px;
    display: flex;
    justify-content: center;
  }
}
</style>
